<template>
  <div id="doctor">
    <div id="doc_bot">
      <el-row :gutter="20">
        <el-col :span="4" :offset="15" class="setup">
          <div style="display: flex; justify-content: center; align-items: center;">
            <el-avatar :src="userAvatar"></el-avatar>
            <em>{{ userName }}</em>
          </div>
          <div class="bell-icon">
            <el-popover placement="bottom" width="400" trigger="hover">
              <div style="margin:  10px 0; position: relative;" v-for="item in MessageList" :key="item.userId" @click="goMessage(item)">
                <div style="display: flex;cursor: pointer;" >
                  <el-avatar :src="item.avatar"></el-avatar>
                  <div style="display: flex; flex-direction: column;">
                    <em style="margin-left: 10px;">{{ item.nickname }}</em>
                    <em style="margin-left: 10px;">{{ item.timestamp }}</em>
                  </div>
                </div>
                <em class="bell-num">{{ item.unReadTotal }}</em>
              </div>
              <template slot="reference">
                <i style="font-size: 30px;" class="el-icon-bell"></i>
                <em class="bell-num" style="top: 0;">{{ messagesNum }}</em>
              </template>
            </el-popover>

          </div>
          <ToGao/>
        </el-col>
        <el-col style="cursor: pointer;" :span="4" class="exit">
          <div style="display: flex; justify-content: center; align-items: center;">
            <i class="el-icon-switch-button" @click="exit"></i>
            <em @click="exit">退出登录</em>
          </div>

        </el-col>
      </el-row>
    </div>


    <div id="doc_main">
      <el-row>
        <el-col :span="4" class="menu">
          <!-- <div class="menu"> -->
          <el-row class="tac">
            <h5 class="menu_tit">宠物 服务</h5>
            <el-col :span="18" :offset="6">
              <el-menu class="el-menu-vertical-demo" background-color="rgba(0,0,0,0)" text-color="#797979"
                active-text-color="#ffd04b" :router="true" :default-active="defaultActive">
                <el-menu-item index="/consumer/homePage">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="/consumer/petsCenter">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">宠物中心</span>
                </el-menu-item>
                <el-menu-item index="/consumer/address">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">地址管理</span>
                </el-menu-item>
                <el-menu-item index="/consumer/appointment">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">预约宠物服务</span>
                </el-menu-item>
                <el-menu-item index="/consumer/receivingOrders">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">宠物服务预约管理</span>
                </el-menu-item>
                <el-menu-item index="/consumer/questionAnswering/detail">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">我的知识问答</span>
                </el-menu-item>
                <el-menu-item index="/consumer/questionAnswering/list">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">知识问答广场</span>
                </el-menu-item>
                <el-menu-item index="/consumer/MyUser">
                  <i class="el-icon-s-custom"></i>
                  <span slot="title">个人中心</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
          <!-- </div> -->
        </el-col>
        <!-- 定义医生功能模块左侧菜单部分 -->
        <el-col :span="20" class="content">
          <router-view></router-view>
        </el-col>
        <!-- 右侧展示内容，根据菜单的点击进行路由跳转 -->
      </el-row>
    </div>

    <!-- 定义页面尾部的退出登录部分 -->
  </div>
</template>
<script>
import { getUserMessageList, getUserMessage ,getUserMessageRead} from '@/http/user.js'
import { mapGetters } from 'vuex'
import { mapActions } from 'vuex'
import  ToGao from '@/components/tiGao.vue'
export default {
  components:{
    ToGao
  },
  data() {
    return {
      message: '',
      messages: [],
      connected: false,
      error: null,
      timeId: null,
      MessageList: [],
      messagesNum: 0,
    };
  },
  methods: {
    ...mapActions(['user/logout',]),
     async exit() {
      this['user/logout']()
      this.$router.push('/login')
    },
    async goMessage(item) {
      if (item.messageIdList) {
        await getUserMessageRead({"messageIdList":item.messageIdList})
      }
     
      this.$router.push({
        path: '/chat',
        query: {
          sendId: this.userId,
          redaId: item.userId,
          sendName: this.userName,
          redaName: item.nickname,
        }
      })
    }
  },
  mounted() {
    getUserMessageList().then(res => {
      this.MessageList = res.data
    })
    getUserMessage({ type: 'unread', otherId: this.userId }).then(res => {
      this.messagesNum = res.data.length
    })

  },
  beforeDestroy() {
    // 组件销毁时断开连接
    this.$socket.close()
  },
  computed: {
    ...mapGetters({
      userName: 'user/getUserName',
      userAvatar: 'user/getUserAvatar',
      userId: 'user/getUserId',
    }),
    defaultActive() {
      let pathArr = this.$route.path.split("/");
      let activePath = "/" + pathArr[1] + "/" + pathArr[2];
      return activePath;
    }
  },
};
</script>
<style lang="scss" scoped>
#doctor {
  width: 100%;
  height: 100%;
  min-height: 800px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  #doc_main {
    width: 100%;
    //  height: 90%
    flex: 1;
  }

  .el-row {
    height: 100%;
  }

  .menu {
    height: 100%;
    background: rgba($color: #fdfdfe, $alpha: 0.7);
    position: relative;

    .menu_tit {
      background-image: url(../assets/img/bg.jpg);
      background-size: 100% 100%;
      object-fit: cover;
      height: 120px;
      font-size: 26px;
      color: #88e8dd;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 2px solid #88e8dd;
    }

    .user {
      display: flex;
      width: 100%;
      height: 120px;
      border-top: 2px solid #797979;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 0px;

      em {
        margin-left: 14px;
      }
    }
  }

  .content {
    padding: 35px 50px;
    box-sizing: border-box;
    height: 100%;

    >div {
      height: 100%;
    }
  }

  #doc_bot {
    height: 60px;
    width: 100%;

    .exit {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;

      em {
        margin-left: 17px;
      }
    }

    .setup {
      display: flex;
      justify-content: space-evenly;
      margin-top: 10px;
    }
  }
}
.bell-num {
    position: absolute;
    top: 10px;
    right: 5px;
    line-height: 10px;
    text-align: center;
    border-radius: 3rem;
    word-break: normal;
    display: inline-block;
    color: #f1f1f1;
    transform: scale(.8);
    font-size: 1rem;
    font-weight: 500;
    padding: 3px 5px;
    background: #f03535;
    border-radius: 50px;
    /* border: 1px solid #181818; */
  }
.bell-icon {
  position: relative;
  width: 40px;
  height: 40px;

 
}
</style>
<style lang="scss">
.el-menu-item.is-active {
  color: #16dcb8 !important;
}
</style>
